آموزش دوره جامع جامع React 19 + بوت‌کمپ تجارت الکترونیک + پرسش و پاسخ مصاحبه [ویدئویی] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه دوره Course Introduction

• تاریخچه و نقاط عطف React React History - Milestone

• React RC چیست و آخرین نسخه React What is React RC & Latest React Version

• تمرین: React RC چیست و آخرین نسخه React IQ - What is React RC & Latest React Version

• ساخت اولین پروژه با React 19 Creating First Project - React 19

• تمرین: ساخت اولین پروژه با React 19 IQ - Creating First Project - React 19

• درک ساختار پروژه Understanding Project Structure

• تمرین: درک ساختار پروژه IQ - Understanding Project Structure

• ساخت پروژه با TypeScript Creating Project with TypeScript

• تمرین: ساخت پروژه با TypeScript IQ - Creating Project with TypeScript

• ساخت پروژه در NextJS Creating Project in NextJS

• ساخت پروژه در Remix Creating Project in Remix

• تمرین: پروژه با TypeScript و Remix IQ - Project with TypeScript and Remix

مبانی React React Fundamentals

• ساخت کامپوننت از صفر Creating Component from Scratch

• تمرین: ساخت کامپوننت از صفر IQ - Creating Component from Scratch

• ساخت کارت محصول Creating Product Card

• تمرین: ساخت کارت محصول IQ - Creating Product Card

• رندر مقادیر پویا از یک شیء (Object) Render Dynamic Values from an Object

• تمرین: رندر مقادیر پویا از یک شیء IQ - Render Dynamic Values from an Object

• رندر مقادیر پویا از یک آرایه (Array) Rendering Dynamic Values from an Array

• مفهوم ویژگی Key در Map() Concept of Key Attribute in Map()

• تمرین: رندر مقادیر پویا از آرایه و ویژگی Key IQ - Rendering Dynamic Values from Array and Key Attribute

• React Fragment و Fragment خالی React Fragment & Empty Fragment

• تمرین: React Fragment و Fragment خالی IQ - React Fragment & Empty Fragment

• تفاوت Default Export و Named Export Default vs Named Export

• تمرین: تفاوت Default Export و Named Export IQ - Default vs Named Export

• قوانین JSX The Rules of JSX

• تمرین: قوانین JSX IQ - The Rules of JSX

• اختصاص JSX به متغیر Assigning JSX to Variable

• تمرین: اختصاص JSX به متغیر IQ - Assigning JSX to Variable

• درک مفاهیم Props Understanding Props

• تمرین: درک مفاهیم Props IQ - Understanding Props

• پویا کردن کامپوننت محصول با استفاده از Props Making Product Component Dynamic Using Props

• رندر شرطی (Conditional Rendering) Conditional Rendering

• تمرین: رندر شرطی IQ - Conditional Rendering

• مدیریت رویدادهای پایه: کلیک (Click) Basic Event Handling - Click

• تمرین: مدیریت رویدادهای پایه IQ - Basic Event Handling

• ارسال پارامتر (Parameter Passing) Parameter Passing

• تمرین: ارسال پارامتر IQ - Parameter Passing

• تکلیف: ساخت یک کامپوننت پویای کارمند Task - Create a Dynamic Employee Component

• تکلیف: رندر شرطی در کامپوننت کارمند (isActive) Task - Conditional Rendering on Employee Component (isActive)

• تکلیف: محاسبه مقدار فاکتوریل با ارسال پارامتر Task - Calculate the Factorial Value by Passing Parameter

مدیریت وضعیت (State Management) State Management

• وضعیت (State) چیست و چرا به آن نیاز داریم؟ What is the State and Why Needed?

• تمرین: وضعیت چیست و چرا به آن نیاز داریم؟ IQ - What is the State and Why Needed?

• هوک useState و درک نحوه ایجاد وضعیت useState() Hook - Understanding State Creation

• تمرین: هوک useState و درک نحوه ایجاد وضعیت IQ - useState() Hook - Understanding State Creation

• وضعیت به عنوان یک Snapshot State as a Snapshot

• تمرین: وضعیت به عنوان یک Snapshot IQ - State as a Snapshot

• به‌روزرسانی وضعیت بر اساس وضعیت قبلی Updating State Based on Previous State

• تمرین: به‌روزرسانی وضعیت بر اساس وضعیت قبلی IQ - Updating State Based on Previous State

• کار با چندین وضعیت (Multiple States) Working with Multiple States

• تابع مقداردهی اولیه برای جلوگیری از بازسازی وضعیت Initializer Function - Avoiding Recreation of Initial State

• تمرین: تابع مقداردهی اولیه IQ - Initializer Function - Avoiding Recreation of Initial State

• استفاده از آرایه به عنوان وضعیت Array as State

• تمرین: استفاده از آرایه به عنوان وضعیت IQ - Array as State

• استفاده از شیء (Object) به عنوان وضعیت Object as State

• تمرین: استفاده از شیء به عنوان وضعیت IQ - Object as State

• تکلیف: مقداردهی اولیه وضعیت با یک آرایه بزرگ Task - Initialize the State with the Large Array

• تکلیف: به‌روزرسانی عناصر وضعیت با استفاده از تابع Updater Task - Update the Elements of the State Using Updater Function

بررسی عمیق مدیریت رویدادها Event Handling - Deep Dive

• مرور مدیریت رویدادها Event Handling Recap

• شیء رویداد React: رویدادهای مصنوعی (Synthetic Event) React Event Object - Synthetic Event

• تمرین: شیء رویداد React IQ - React Event Object - Synthetic Event

• رویداد ورودی: جعبه متن (Textbox) Input Event - Textbox

• تکلیف: رویداد ورودی جعبه متن Task - Input Event - Textbox

• تمرین: رویداد ورودی جعبه متن IQ - Input Event - Textbox

• انتشار رویداد: حبابی شدن (Bubbling) Event Propagation - Bubbling

• تمرین: انتشار رویداد IQ - Event Propagation - Bubbling

• متوقف کردن انتشار رویداد (Stopping Propagation) Stopping Propagation

• تمرین: متوقف کردن انتشار IQ - Stopping Propagation

• متد preventDefault و جلوگیری از رفتار پیش‌فرض preventDefault() - Preventing Default Behavior

• تمرین: preventDefault IQ - preventDefault() - Preventing Default Behavior

• کار با چندین وضعیت with Multiple States

• تکلیف: کار با چندین وضعیت Task - with Multiple States

• وضعیت‌ها به صورت شیء (Object) States as Object

• تکلیف: استفاده از وضعیت شیء Task - Using Object State with

• مدیریت تک رویداد با استفاده از کلید پویا (Dynamic Key) Single Event Handler Using Dynamic Key

• تمرین: مدیریت تک رویداد با کلید پویا IQ - Single Event Handler Using Dynamic Key

• تکلیف: مدیریت تک رویداد با کلید پویا Task - Single Event Handler Using Dynamic Key

• به‌روزرسانی تابعی: روش صحیح Functional Update - The Correct Way

• فیلدهای ورودی: چک‌باکس (Checkbox) Input Fields - Checkbox

• فیلدهای ورودی: رادیو باتن (Radio Button) Input Fields - Radio Button

• تکلیف: فیلدهای ورودی رادیو باتن Task - Input Fields - Radio Button

• تمرین: فیلدهای ورودی IQ - Input Fields

• تکلیف: مدیریت فرم با استفاده از Textbox، Checkbox و Radio Task - Form Handling Using Textbox, Checkbox & Radio Buttons

• مدیریت رویدادها: رویداد ۱ Event Handling - Event

• مدیریت رویدادها: رویداد ۲ Event Handling - Event

• تکلیف: مدیریت رویدادها Task - Event Handling - & Event

• مدیریت رویدادها و رویدادها Event Handling - & Event

• تمرین: مدیریت رویدادها IQ - Event Handling - & Event

• مدیریت رویدادها و رویدادها Event Handling - & Event

• تکلیف: مدیریت رویدادها Task - Event Handling - & Event

• تمرین: مدیریت رویدادها IQ - & Event

مدیریت عملی وضعیت Managing State Practically

• مقدمه Introduction

• ایجاد پروژه Project Creation

• راه‌اندازی پروژه با Tailwind CSS و ساخت هدر Project Setup with Tailwind CSS and Header Creation

• ساخت کامپوننت کارت محصول Creating Product Card Component

• رندر لیست محصولات با داده‌های استاتیک Rendering Product List with Static Data

• ساخت مودال افزودن محصول Creating Add Product Modal

• ساخت فرم افزودن محصول Creating Form for Add Product

• ذخیره مقادیر فرم افزودن محصول Storing the Values of the Add Product Form

• پیاده‌سازی قابلیت افزودن محصول Implementing Add Product Functionality

• پیاده‌سازی قابلیت حذف Implementing Delete Functionality

• راه‌اندازی فرم ویرایش محصول Setting Up Edit Product Form

• پیاده‌سازی قابلیت ویرایش محصول Implementing Edit Product Functionality

• پیاده‌سازی قابلیت فعال/غیرفعال کردن محصول Implementing Active/Inactive Product Functionality

• رندر محصولات فعال و غیرفعال Rendering Active/Inactive Products

هوک useEffect و کار با چرخه حیات کامپوننت useEffect() - Working with Component Life Cycles

• درک چرخه حیات کامپوننت Understanding Component Life Cycle

• تمرین: درک چرخه حیات کامپوننت IQ - Understanding Component Life Cycle

• مقدمه‌ای بر هوک useEffect Introduction to useEffect Hook

• استفاده از هوک ساده useEffect() Using Simple useEffect() Hook

• تمرین: استفاده از هوک ساده useEffect() IQ - Using Simple useEffect() Hook

• اهمیت آرایه وابستگی‌ها (Dependency Array) در useEffect useEffect() - Importance of the Dependency Array

• تمرین: اهمیت آرایه وابستگی‌ها IQ - useEffect() - Importance of the Dependency Array

• تابع Cleanup در useEffect useEffect() - Cleanup Function

• تمرین: تابع Cleanup IQ - useEffect() - Cleanup Function

• مکان مناسب برای فراخوانی هوک useEffect The Right Place to Call the useEffect() Hook

• چه زمانی از استفاده از useEffect در React اجتناب کنیم When to Avoid Using the useEffect Hook in React

• درک چرخه اضافی Setup و Cleanup در React Strict Mode Understanding React Strict Mode's Extra Setup and Cleanup Cycle

• مدیریت وابستگی‌ها در هوک useEffect useEffect() Hook - Managing Dependencies

• مقایسه useEffect با به‌روزرسانی‌های DOM و نیاز به useLayoutEffect useEffect() Vs DOM Updates - Need of UseLayoutEffect()

• به تعویق انداختن افکت‌های ناشی از تعاملات در React Deferring Effects Triggered by Interactions in React

• درک اینکه useEffect فقط در سمت کلاینت اجرا می‌شود Understanding useEffect Only Runs on Client Side

React Router React Router

• مقدمه‌ای بر مسیریابی (Routing) Introduction to Routing

• درک مسیریابی در React Understanding Routing in React

• پیکربندی مسیرها با استفاده از React Router Configure Routes Using React Router

• تمرین: پیکربندی مسیرها با React Router IQ - Configure Routes Using React Router

• درک تفاوت Single Page Application و Multi Page Application Understanding Single-page Application and Multi-page Application

• تمرین: SPA در مقابل MPA IQ - SPA vs MPA

• ساخت نوار ناوبری (Navbar) در مسیر ریشه Navbar Creation on Root Route

• ساخت صفحه محصولات Creating Products Page

• صفحه یافت نشد (404) Not Found Page (404)

• تمرین: صفحه یافت نشد (404) IQ - Not Found Page (404)

• درک مسیرهای تودرتو (Nested Routes) Understanding Nested Routes

• مدیریت پویای مسیرهای تودرتو با Route Parameter Dynamically Handling Nested Routes - Route Parameter

• تمرین: مسیرهای تودرتو و پارامترهای مسیر IQ - Nested Routes - Route Parameter

• طرح‌بندی‌ها (Layouts) Layouts -

• تمرین: طرح‌بندی‌ها IQ - Layouts -

• ویژگی index و ارجاع به مسیر والد "index" Attribute - Referring the Parent Route

• تمرین: ویژگی index و ارجاع به مسیر والد IQ - "index" Attribute - Referring the Parent Route

• استفاده از Navbar به عنوان یک Layout Use Navbar as a Layout

• ارسال داده به کامپوننت فرزند با context و هوک useOutletContext Passing Data to Child Component - context & useOutletContext() hook

• ارسال داده به کامپوننت فرزند با state و هوک useLocation Passing Data to Child Component - "state" and useLocation() hook

• تمرین: context، useOutletContext، state و useLocation IQ - context, useOutletContext(), "state" and useLocation() hook

• ساخت کارت جزئیات محصول Creating Product Details Card

• درک هوک useRoutes() Understanding the useRoutes() hook

• تمرین: درک هوک useRoutes() IQ - Understanding the useRoutes() hook

• درک کامپوننت‌ها Understanding Component

• تمرین: درک کامپوننت‌ها IQ - Understanding Component

• کامپوننت برای تغییر مسیر (Redirection) Component for Redirection

• استفاده از useNavigate برای تغییر مسیر صحیح useNavigate() - Correct Way to Redirect

• تمرین: useNavigate IQ - & useNavigate()

• تجدید ساختار پروژه Project Restructuring

• بهبود رابط کاربری Interface Improvement

هوک useContext و مدیریت وضعیت سراسری The useContext() Hook - Global State Management

• مفهوم Prop Drilling Prop Drilling

• تمرین: Prop Drilling IQ - Prop Drilling

• درک Context API Understanding of Context API

• تمرین: درک Context API IQ - Understanding of Context API

• هوک useContext() useContext() Hook

• تمرین: هوک useContext() IQ - useContext() Hook

• ساخت رابط کاربری برای اپلیکیشن ماشین حساب Creating Interface for Calculator App

• راه‌اندازی Context API در اپلیکیشن ماشین حساب Setup Context API into Calculator App

• مدیریت داده‌های ورودی در وضعیت سراسری (Global State) Handling Input Data in the Global State

• دستکاری وضعیت سراسری Global State Manipulation

• تمرین: دستکاری وضعیت سراسری IQ - Global State Manipulation

• تامین‌کنندگان Context تودرتو (Nested Context Providers) Nested Context Providers

Redux Tool Kit (RTK) مدیریت پیشرفته وضعیت سراسری Redux Tool Kit (RTK) - Advanced Global State Handling

• مقدمه‌ای بر Redux و RTK Introduction to Redux and RTK

• تمرین: مقدمه‌ای بر Redux و RTK IQ - Introduction to Redux and RTK

• ساخت Slice Creating Slice

• تمرین: ساخت Slice IQ - Creating Slice

• پیکربندی Store Configuring Store

• تمرین: پیکربندی Store IQ - Configuring Store

• دریافت داده‌های استور با useSelector() Fetching the Store Data - useSelector()

• تمرین: دریافت داده‌های استور با useSelector() IQ - Fetching the Store Data - useSelector()

• ساخت Actionها در Slice Creating Actions in Slice

• تمرین: ساخت Actionها در Slice IQ - Creating Actions in Slice

• نحوه عملکرد تغییرناپذیری (Immutability) در Actionها در پشت صحنه How Immutability in Actions Works Behind the Scenes

• تمرین: تغییرناپذیری در Actionها IQ - How Immutability in Actions Works Behind the Scenes

• مدیریت مقادیر ورودی در Redux Handling Input Values in Redux

• محاسبه عملیات ریاضی در Redux Calculating Arithmetic Operations in Redux

• پیاده‌سازی Redux در اپلیکیشن React Router Implementing Redux in React Router App

مدیریت درخواست‌های HTTP Handling HTTP Requests

• مقدمه‌ای بر درخواست‌های HTTP Introduction - HTTP Requests

• تمرین: مقدمه‌ای بر درخواست‌های HTTP IQ - Introduction - HTTP Requests

• استفاده از Fetch API Fetch() API

• تمرین: Fetch API IQ - Fetch() API

• رندر داده‌های کاربران Rendering Users Data

• متد POST در Fetch API POST Method in fetch() API

• متدهای PUT و PATCH در Fetch API PUT and PATCH Method in fetch() API

• متد DELETE در Fetch API DELETE Method in fetch() API

• مدیریت خطا در Fetch API Error Handling in fetch() API

• مدیریت خطا با بلوک Try Catch() Error Handling with Try-Catch() Block

سمت سرور: مبانی NodeJS و ساخت API با ExpressJS Server Side - NodeJS Basics + API Creation with ExpressJS

• مقدمه Introduction

• تمرین: مقدمه IQ - Introduction

• ایجاد پروژه Project Creation

• ساخت سرور با استفاده از Express.js Creating Server Using Express.js

• تمرین: ساخت سرور با Express.js IQ - Creating Server Using Express.js

• ساخت API پایه Creating Basic API

• تمرین: ساخت API پایه IQ - Creating Basic API

• پیکربندی Nodemon Configuring Nodemon

• تمرین: پیکربندی Nodemon IQ - Configuring Nodemon

• نصب POSTMAN POSTMAN Installation

• ارسال درخواست GET از طریق POSTMAN Making a GET Request from POSTMAN

مبانی MySQL MySQL Basics

• مقدمه Introduction

• تمرین: مقدمه IQ - Introduction

• نصب MySQL MySQL Installation

• ساخت دیتابیس Database Creation

• حذف دیتابیس (Drop Database) Drop Database

• انواع داده‌ها (Data Types) Data Types

• ساخت جدول (Table) Creating Table

• تمرین: ساخت جدول IQ - Creating Table

• کوئری INSERT INSERT Query

• فیلتر کردن پایه با عبارت WHERE Basic Filtering with WHERE Clause

• فیلتر کردن پیشرفته با عبارت WHERE Advanced Filtering with WHERE Clause

• مرتب‌سازی داده‌ها با LIMIT و ORDER BY Sorting Data with 'LIMIT' & 'ORDER BY'

• به‌روزرسانی داده‌ها Updating the Data

• حذف رکوردها با عبارت DELETE Delete Records Using DELETE Clause

• حذف جدول (Drop Table) Drop Table

ادغام دیتابیس در اپلیکیشن Node Database Integration in Node App

• اتصال دیتابیس MySQL به اپلیکیشن Node Connect MySQL Database in Node App

• تمرین: اتصال دیتابیس MySQL به اپلیکیشن Node IQ - Connect MySQL Database in Node App

• دریافت محصولات از دیتابیس Fetching Products from Database

• تمرین: دریافت محصولات از دیتابیس IQ - Fetching Products from Database

• پیکربندی مسیرهای سازمان‌یافته با express.Router() Configuring Organized Routes with express.Router()

• ساخت API برای افزودن محصولات Creating API for Adding Products

• ساخت API برای دریافت یک محصول خاص Creating API to Fetch a Unique Product

• ساخت API برای به‌روزرسانی داده‌های محصول Creating API to Update Product's Data

• تمرین: ساخت API برای به‌روزرسانی محصول IQ - Creating API to Update Product's Data

• ساخت API برای حذف یک محصول Creating API to Delete a Product

• تجدید ساختار اتصال دیتابیس و پیام‌های موفقیت Restructuring Database Connection and Success Messages

تکمیل اپلیکیشن Fullstack (ادغام API) Completing the Fullstack Application (API Integration)

• مقدمه Introduction

• دریافت پویای محصولات Fetching Products Dynamically

• رندر پویای محصولات Rendering Products Dynamically

• ادغام API در صفحه جزئیات محصول Integrating API in Product Details Page

• ساخت رابط کاربری برای افزودن محصولات Creating Interface for Adding Products

• پیاده‌سازی فرم افزودن محصولات Implementing Add Products Form

• ادغام API افزودن محصول Integrating 'Add Product' API

• پیاده‌سازی قابلیت ویرایش محصولات Implementing Edit Products Functionality

• ساخت پاپ‌آپ تایید حذف Creating Delete Confirmation Popup

• ادغام API حذف محصول Integrating Delete Product API

کار با هوک‌های سفارشی (Custom Hooks) Working With Custom Hooks

• مقدمه‌ای بر هوک‌های سفارشی (Custom Hooks) Introduction to Custom Hooks

• تمرین: مقدمه‌ای بر هوک‌های سفارشی IQ - Introduction to Custom Hooks

• ساخت و استفاده از هوک سفارشی Create and Use Custom Hook

• تکلیف ۱: ساخت هوک سفارشی برای تایمر Task 1 - Create A Custom Hook For Timer

• دریافت جزئیات محصول با استفاده از هوک سفارشی Fetching Product Details Using Custom Hook

ساخت اپلیکیشن لیست کارهای (To Do List) با Vite To-Do List App with Vite - Hands-on Practice App

• مقدمه و تعریف Introduction & Definition

• راه‌اندازی محیط Setting-up the Environment

• نصب و پیکربندی Tailwind CSS Tailwind CSS Installation & Configuration

• ساخت کامپوننت فرم To Do (بخش ۱) To-Do Form Component Creation #1

• ساخت کامپوننت فرم To Do (بخش ۲) To-Do Form Component Creation #2

• کامپوننت TodoList: نمایش تسک‌ها TodoList Component - Displaying Tasks

• مدیریت وضعیت تسک‌ها: کامپوننت Todo Item Managing Tasks Status - Todo-Item Component

• پیاده‌سازی قابلیت حذف تسک Implementing Task Deletion Functionality

• پایداری داده‌ها با localStorage Data Persistence with localStorage

• استایل‌دهی به اپلیکیشن Styling the Application

• ساخت کامپوننت خلاصه تسک‌ها Creating a Task Summary Component

• جمع‌بندی و تکالیف Conclusion & Assignments

مقدمه‌ای بر NextJS NextJS Introduction

• چرا NEXT JS به جای ReactJS؟ NEXT JS in Spite of ReactJS

• تمرین: چرا NEXT JS به جای ReactJS؟ IQ - NEXT JS in Spite of ReactJS

• ساخت اولین پروژه Creating First Project

• تمرین: ساخت اولین پروژه IQ - Creating First Project

• ساختار پروژه Project Structure

• تمرین: ساختار پروژه IQ - Project Structure

• مقایسه Pages Router و App Router Pages Router Vs App Router

• تمرین: Pages Router در مقابل App Router IQ - Pages Router Vs App Router

مبانی NextJS با App Router NextJS Basics with App Router

• تعریف مسیرها (Routes) Defining Routes

• مسیرهای تودرتو Nested Routes

• لینک کردن صفحات Linking Pages with

• مقایسه React Server Component و Client Component React Server Component Vs Client Component

• تمرین: Server Component در مقابل Client Component IQ - React Server Component Vs Client Component

• صفحه خطا (Error Page) Error Page

• مسیرهای پویا و پارامترهای مسیر Dynamic Routes and Route Params

• کامپوننت‌های سرور Asynchronous Asynchronous Server Components

• تمرین: کامپوننت‌های سرور Asynchronous IQ - Asynchronous Server Components

کشینگ (Caching) در NextJS Caching in NextJS

• درک کشینگ (Caching) در Next Understanding Caching in Next

• تمرین: درک کشینگ در Next IQ - Understanding Caching in Next

• رفتارهای غیرمنتظره در Build پروژه Unexpected Behaviour in Project Build

• تمرین: رفتارهای غیرمنتظره در Build IQ - Unexpected Behaviour in Project Build

• تبدیل استاتیک به پویا: کنترل کش Static to Dynamic - Cache Control

• تمرین: تبدیل استاتیک به پویا و کنترل کش IQ - Static to Dynamic - Cache Control

هوک‌های متفرقه Miscellaneous Hooks

• هوک useActionState() useActionState() Hook

• تمرین: هوک useActionState() IQ - useActionState() Hook

• جادوی Memoization The Magic of Memoization

• تمرین: Memoization IQ - Memoization

• هوک‌های useCallback() و useMemo() useCallback() and useMemo() Hook

• تمرین: useCallback و useMemo IQ - useCallback() and useMemo() Hook

• هوک useOptimistic() The useOptimistic() Hook

• تمرین: هوک useOptimistic() IQ - useOptimistic() Hook

• هوک useFormStatus() The useFormStatus() Hook

• تمرین: هوک useFormStatus() IQ - useFormStatus() Hook

• هوک useDebugValue() The useDebugValue() Hook

• تمرین: هوک useDebugValue() IQ - useDebugValue() Hook

پروژه MyStore: بخش مدیریت (Admin) MyStore - Admin Section

• مقدمه Introduction

• ایجاد پروژه Project Creation

• ساخت کامپوننت سایدبار (Sidebar) Creating Sidebar Component

• کار روی سایدبار Working on Sidebar

• ترکیب کلاس‌های Utility با @apply Combining Utility Classes with @apply

• تمرین: @layer و @apply در ترکیب کلاس‌ها IQ - @layer & @apply - Combining Utility Classes

• استایل‌دهی به سایدبار Styling the Sidebar

• افزودن آیکون‌ها به سایدبار Adding Icons to the Sidebar

• ساخت صفحه کاربران (Users) Creating 'Users' Page

• ساخت فرم افزودن کاربر Creating 'Add Users' Form

• پیاده‌سازی معماری مبتنی بر کامپوننت Implementing Component-Based Architecture

• ساخت کامپوننت‌های Button و Input Creating Button & Input Components

• بازسازی ساختار کد (Refactoring) Refactoring Code Structure

• ساخت دیتابیس Database Creation

• افزودن کاربران با Server Action Adding Users with Server Action

• پیاده‌سازی هشینگ (Hashing) Implementing Hashing

• تمرین: پیاده‌سازی هشینگ IQ - Implementing Hashing

• اعتبارسنجی ایجاد کاربر Validating User Creation

• رندر کاربران در جدول Rendering Users in the Table

• ساخت صفحه ویرایش کاربر Creating Edit User Page

• مقادیر پیش‌فرض پویا برای ویرایش Dynamic Default Values for Edit

• به‌روزرسانی داده‌های کاربر Updating User Data

• حذف کاربر Deleting User

• ساخت پاپ‌آپ تایید حذف Creating Delete Confirmation Popup

• فعال‌سازی پاپ‌آپ تایید Enabling Confirmation Popup

• حذف کاربر از طریق پاپ‌آپ تایید Deleting User by Confirmation Popup

• ساخت صفحه نوع محصول (Product Type) Creating Product Type Page

• ساخت صفحه افزودن نوع محصول Creating Add Product Type Page

• افزودن نوع محصول و مدل محصول به Schema Adding Product Types and Product Models into the Schema

• تمرین: افزودن مدل‌ها به Schema IQ - Adding Models in the Schema - Product Type & Product

• افزودن نوع محصول با Server Action Adding Product Type Using Server Action

• رندر انواع محصولات در جدول Rendering Product Types into the Table

• ساخت صفحه ویرایش نوع محصول Creating Edit Product Type Page

• مقادیر پیش‌فرض پویا برای نوع محصول Dynamic Default Values for Product Type

• به‌روزرسانی نوع محصول با Server Action Updating Product Type with Server Action

• حذف نوع محصول با Server Action Deleting Product Type with Server Action

• ساخت صفحه محصولات Creating Products Page

• ساخت رابط کاربری لیست محصولات Creating Products Interface for Listing

• ساخت صفحه افزودن محصول Creating Add Product Page

• تکمیل فرم افزودن محصول Completing Add Product Form

• ساخت کامپوننت Switch Creating Switch Component

• ساخت کامپوننت File Input Creating File Input Component

• رندر پویای داده‌های نوع محصول در صفحه افزودن محصول Rendering Dynamic Product Types Data in Add Product Page

• ساخت Server Action برای افزودن محصولات Creating Server Action for Adding Products

• پیاده‌سازی قابلیت ذخیره‌سازی تصاویر Implementing Image Storage Functionality

• تکمیل قابلیت افزودن محصول Completing Add Product Functionality

• رندر داده‌های پویا در جدول محصولات Rendering Dynamic Data in Products Table

• ساخت صفحه ویرایش محصول Creating Edit Product Page

• مقادیر پیش‌فرض پویا برای محصول Dynamic Default Values for Product

• رندر مقادیر پیش‌فرض در Switch و File Input Render Default Values in Switch and File Input

• به‌روزرسانی محصول با Server Action Updating Product with Server Action

• تمرین: به‌روزرسانی محصول با Server Action IQ - Updating Product with Server Action

• حذف محصول با Server Action Deleting Product with Server Action

پروژه MyStore: بخش کاربر (Client) MyStore - Client Section

• شروع بخش کاربر (Client) Initiating Client Section

• ساخت کامپوننت هدر Creating Header Component

• پیاده‌سازی نوار جستجو Implementing Search Bar

• ترکیب کلاس‌های Tailwind با روش بهینه Joining Tailwind Classes with Ideal Approach

• تمرین: ترکیب کلاس‌های Tailwind IQ - Joining Tailwind Classes with Ideal Approach

• افزودن منوی کشویی پروفایل Adding Profile Dropdown

• هوک useRef() useRef() Hook

• بستن منوی پروفایل با کلیک در خارج از منو Close Profile Dropdown Menu on Outside Click

• تمرین: بستن منوی پروفایل با کلیک خارج IQ - Close Profile Dropdown Menu on Outside Click

• ساخت کامپوننت Input Creating Input Component

• ساخت صفحه اصلی (Home Page) Creating Home Page

• ساخت بخش فیلترها Creating Filters Section

• ساخت کامپوننت سفارشی Accordion Creating Custom Accordion Component

• تمرین: ساخت کامپوننت Accordion IQ - Creating Custom Accordion Component

• تکمیل کامپوننت Accordion Completing Custom Accordion Component

• ادامه بخش فیلترها Continue on Filter Section

• ساخت کامپوننت لغزنده بازه قیمتی (Price Range Slider) Creating Price Range Slider Component

• ساخت کامپوننت کارت محصول Creating Product Card Component

• تکمیل کامپوننت کارت محصول Completing Product Card Component

• ساخت کامپوننت Button Creating Button Component

• ساخت API برای لیست محصولات API Creation for Product Listing

• رندر پویای محصولات با استفاده از Server Action Dynamic Product Rendering Using Server Action

• ساخت API برای دریافت انواع محصولات API Creation For Fetching Product Types

• رندر پویای انواع محصولات با API Dynamic Product Type Rendering Using API

• تنظیم مقادیر فیلتر در Search Params Set Filter Values into the Search Params

• اصلاح API محصولات برای اعمال فیلترها Modifying Products API to Apply Filters

• قابلیت فیلتر در سمت کلاینت Filter Functionality on Client Side

• قابلیت فیلتر جستجو Search Filter Functionality

• ساخت صفحه محصول Creating the Product Page

• تکمیل صفحه محصول Completing Product Page

• ساخت API برای دریافت محصول بر اساس ID API Creation For Fetching a Product by Its ID

• رندر پویای جزئیات محصول با API Dynamic Product Details Rendering Using API

• رندر محصولات بر اساس وضعیت (Status) Rendering Products Based on Status

• ساخت صفحه سبد خرید Creating Cart Page

• رندر کارت آیتم‌های سبد خرید Rendering Cart Item Card

• تکمیل رابط کاربری سبد خرید Completing the Cart UI

• ساخت Context برای مدیریت محصولات Creating Context for Handling Products

• تمرین: ساخت Context برای مدیریت محصولات IQ - Creating Context for Handling Products

• پیاده‌سازی قابلیت‌های سبد خرید Implement Cart Functionalities

• پویا کردن صفحه سبد خرید Making Cart Page Dynamic

• فعال‌سازی انتخاب تعداد Enabling Quantity Selection

• پایان‌بندی صفحه پویای سبد خرید Finishing Dynamic Cart Page

پروژه MyStore: احراز هویت MyStore - Authentication

• ساخت صفحه ورود (Login) Creating Login Page

• مقدمه‌ای بر JOSE و JWT Introduction of JOSE + JWT

• راه‌اندازی جریان احراز هویت با JOSE و JWT Setup Authentication Flow Using JOSE + JWT

• ساخت Server Action برای ورود Create Server Action for Login

• احراز هویت مبتنی بر کوکی (Cookie Based) Cookie-Based Authentication

• تمرین: احراز هویت مبتنی بر کوکی IQ - Cookie-Based Authentication

• مدیریت مسیرهای خصوصی و عمومی با Middleware Handling Private and Public Routes Using Middleware

• دریافت داده‌های کاربر احراز هویت شده Fetching Authenticated User Data

• پیاده‌سازی خروج (Logout) با Server Action Implementing Logout with Server Action

• احراز هویت برای تمام Server Actionهای بخش مدیریت Authenticate All Server Actions of Admin Section

• ساخت مسیرهای احراز هویت در بخش کلاینت Creating Authentication Routes in Client Section

• ساخت رابط کاربری برای مسیرهای احراز هویت Creating Interface for Authentication Routes

• ساخت جدول خریداران (Buyer) در دیتابیس Creating Buyer Table in the Database

• ساخت API ثبت‌نام (Sign up) Creating Sign-up API

• تست API ثبت‌نام با Postman Testing Signup API Using Postman

• ساخت API ورود (Login) Creating Login API

• تست API ورود با Postman Testing the Login API Using Postman

• پیاده‌سازی قابلیت ثبت‌نام در بخش کلاینت Implementing Signup Functionality in the Client Section

• پیاده‌سازی قابلیت ورود مشتری Implementing Customer Login Functionality

• API برای دریافت داده‌های یک مشتری خاص API to Fetch Unique Customer's Data

• دریافت داده‌های مشتری با API در بخش کلاینت Fetching Customer's Data Using API in the Client Section

• قابلیت خروج در بخش کلاینت Logout Functionality in the Client Section

پروژه MyStore: درگاه پرداخت و فروش MyStore - Payment Gateway & Sales

• مقدمه Introduction

• تمرین: مقدمه IQ - Introduction

• پیکربندی‌های پایه Stripe Basic Configurations of Stripe

• رندر فرم پرداخت داخلی (Embedded Checkout) استرایپ Rendering Stripe's Embedded Checkout Form

• ساخت پویای جلسه پرداخت (Checkout Session) Creating Checkout Session Dynamically

• ساخت صفحه وضعیت پرداخت Creating Payment Status Page

• ساخت جدول فروش و تراکنش‌ها در دیتابیس Creating Sales and Transaction Table in Database

• API برای به‌روزرسانی دیتابیس پس از پرداخت موفق API to Update Database After the Successful Checkout

• تست API پرداخت با Postman Testing the Checkout API Using Postman

• ادغام API پرداخت در بخش کلاینت Integrating Checkout API in the Client Section

• ساخت بخش مدیریت خریداران Creating Buyer Master Section

• رندر داده‌های پویا در جدول خریداران Rendering Dynamic Data in Buyers Table

پروژه MyStore: گزارشات و تحلیل‌ها (نمودارها) MyStore - Reports and Analysis (Charts)

• مقدمه Introduction

• آماده‌سازی گزارش مشتریان و خریداران Preparing Customers and Buyers Report

• رندر گزارش مشتریان و خریداران Rendering Customers & Buyers Report

• آماده‌سازی گزارش کل درآمد Preparing Total Revenue Report

• آماده‌سازی گزارش سفارشات اخیر Preparing Recent Order Report

• ساخت مودال محصولات خریداری شده Creating Purchased Products Modal

• دریافت محصولات خریداری شده در مودال Fetching Purchased Products in Modal

• رندر محصولات در جدول محصولات خریداری شده Render Products in the Purchased Products Table

• پیاده‌سازی نمودار با استفاده از Recharts Implementing Chart Using Recharts

• آماده‌سازی گزارش فروش با استفاده از نمودار Preparing Sales Report Using Chart

• رندر نمودار فروش با مقادیر پویا Rendering Sales Chart with Dynamic Values

• آماده‌سازی گزارش مشتریان با استفاده از نمودار Preparing Customers Report Using Chart

• ساخت کامپوننت بخش نمودار Creating Chart Section Component

پروژه MyStore: استقرار (Deployment) MyStore – Deployment

• مقدمه Introduction

• تمرین: مقدمه IQ - Introduction

• مقدمه‌ای بر CI/CD Introduction to CI/CD

• تمرین: مقدمه‌ای بر CI/CD IQ - Introduction to CI/CD

• ادغام با Github Github Integration

• تمرین: ادغام با Github IQ - Github Integration

• مهاجرت دیتابیس از SQLite به MySQL Database Migration from SQLite to MySQL

• اتصال دیتابیس MySQL به اپلیکیشن مدیریت Link the MySQL Database to Admin Application

• استقرار اپلیکیشن مدیریت روی Vercel Deploying Admin App on Vercel

• استقرار اپلیکیشن کلاینت روی Vercel Deploying Client App on Vercel

پروژه کوچک: تایید ایمیل با OTP Bit-Sized Project: Email OTP Verification

• مقدمه و تعریف پروژه Introduction & Project Definition

• چرا Vite را به جای CRA انتخاب کنیم؟ Why Choose Vite over CRA?

• راه‌اندازی محیط Setting Up the Environment

• نصب و پیکربندی Tailwind CSS Install and Configure Tailwind CSS

• ساخت کارت تایید ایمیل Creating Card for Email Verification

• ساخت مسیرها Creating Routes

• ساخت کارت تایید OTP Creating OTP Verification Card

• مدیریت مقادیر فرم Handling Form Values

• راه‌اندازی سرور Express با NodeJS Setting Up Express Server Using NodeJS

• ساخت API پایه GET Creating Basic GET API

• ساخت API ساده POST Creating a Simple POST API

• نصب POSTMAN POSTMAN Installation

• ارسال درخواست POST از طریق POSTMAN Making a POST Request from POSTMAN

• سازمان‌دهی مسیرها با express.Router() Organizing Routes with "express.Router()"

• ارسال ایمیل با استفاده از SendGrid Sending Email Using SendGrid

• ساخت API برای تایید OTP Creating API to Verify OTP

• تنظیم زمان انقضای OTP Set OTP Expiration Time

• ادغام API برای ارسال OTP API Integration for Sending OTP

• ادغام API برای تایید OTP Integrating API to Verify the OTP